fix: drag limitation on mousemove#128
Open
Delgado-tech wants to merge 5 commits into
Open
Conversation
zdila
reviewed
May 23, 2025
| const handleOpacity = (x: number) => { | ||
| if (opacityRef.current) { | ||
| const newO = getHandleValue(x, opacityRef.current, barSize) / 100 | ||
| console.log(newO) |
zdila
added a commit
to zdila/react-gradient-color-picker
that referenced
this pull request
Jun 10, 2026
Replaces the separate mouse (and partial touch) handlers across the hue, opacity, gradient and advanced sliders and the saturation square with a single Pointer Events code path. This brings full mobile/touch support (PRs hxf31891#130 and hxf31891#132) while preserving PR hxf31891#128's "drag outside the component" behaviour via global pointermove/pointerup listeners. - onPointerDown + global pointermove/pointerup listeners everywhere - touch-action: none on draggable elements to prevent page scrolling while dragging on touch devices - drop the stray console.log left in Opacity Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
zdila
added a commit
to zdila/react-gradient-color-picker
that referenced
this pull request
Jun 10, 2026
- rename package to the @Freemap scope, v3.1.0, point repository/bugs/ homepage at FreemapSlovakia, publishConfig.access=public - update README install/import/badges and describe the fork + merged PRs - drop unused lodash.throttle dependency (removed by PR hxf31891#128) - bump dependencies via ncu (tinycolor2 1.6, React 19 dev types, etc.); keep TypeScript on 5.x since TS 6 rejects the intentional ES5 target - add pnpm-workspace.yaml so pnpm 11 builds esbuild and skips the pre-run deps check Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
👋 Heads-up: I've published a maintained fork that bundles this PR together with #129, #130 and #132, since they're still open upstream.
Thanks @Delgado-tech — your "drag outside the component" fix (and the Yarn → pnpm migration) is the base of the fork. On top of it I unified the slider/square input on Pointer Events (mouse + touch + pen), upgraded to TypeScript 6, refreshed dependencies, and fixed a corner-reachability bug in the saturation square (pure white was previously unreachable). This is an unofficial community fork, not affiliated with the upstream maintainer — published simply to help anyone who needs these changes now. Happy to upstream any of it if a maintainer would like. (Fork prepared with Claude Code.) |
This was referenced Jun 11, 2026
Open
zdila
added a commit
to zdila/react-gradient-color-picker
that referenced
this pull request
Jun 11, 2026
PR hxf31891#128 (our base) commented out the old keyboard/focus based point deletion, leaving the trash button in GradientControls as the only way to remove a stop — and nothing happened when double-clicking a handle dot. Wire onDoubleClick on the handle to the existing deletePoint (single click already selects the dot, so double-click removes it; a 2-stop gradient is left intact). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The original version had a pretty limiting behavior — when interacting with the color picker (like dragging the saturation square, hue, opacity sliders, etc.), your mouse had to stay inside the component. If you moved outside, everything just froze until you came back.
With this fork, that’s no longer a problem. Now you can drag freely, even outside the component.
I also took the chance to adjust some TypeScript typings along the way.
💡 Note: In this fork, I migrated the project's package manager from Yarn to PNPM